/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component, Fragment} from 'react';
import {
  Form,
  Button,
  Badge,
  Radio,
  Tooltip,
  DatePicker,
  Descriptions,
  Tag,
  Icon,
  Switch,
  message,
  Modal,
  Drawer,Carousel
} from 'antd';
import {connect} from 'dva';
import forEach from 'lodash/forEach';
import request from '@/utils/request';
import {
  getTimeDistance,
  renderValveOpen,
  download,
  formateObjToParamStr,
  renderSignalIntensity,
  afterCloseModal
} from '@/utils/utils';
import moment from 'moment';
import ReactEcharts from 'echarts-for-react';
import ReactDataGrid from 'react-data-grid';
import find from 'lodash/find';
import config from '../../config/config';
import Detail from '@/pages/Meters/Detail';
import BuildModalTitle from '@/components/BuildModalTitle';
import ZImg from 'react-zmage';

const {confirm} = Modal;
const ButtonGroup = Button.Group;

class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.permissions = JSON.parse(sessionStorage.getItem('permissions'));
    this.state = {
      detail: {
        concentrator_info:{},
        latest_data:[]
      },
      ownerDetail: {},
      editRecord: {},
      totalVal: 0,
      showType: 1,
      historyData: [],
      valve_logs: [],
      showCustom: false,
      openValveLoading: false,
      closeValveLoading: false,
      rangePickerValue: [moment(new Date().getFullYear() + '-' + (parseInt(new Date().getMonth()) + 1) + '-' + '01', 'YYYY-MM-DD'), moment(new Date(), 'YYYY-MM-DD')],
    };
  }

  componentDidMount() {
    // console.log('this', this.props.editRecord);
    const that = this;
    that.fetchDetail();
  }

  fetchDetail = () => {
    const that = this;
    request(`/concentrators/${this.props.id}`, {
      method: 'GET',
      params: {},
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          detail: response.data.data,
        }, function () {
        });
      }


    });
  };

  render() {
    const defaultColumnProperties = {
      resizable: true,
    };
    const that=this
    const {detail, ownerDetail} = this.state;
    // console.log('detail',detail)
    const columns = [
      {
        name: '端子号',
        width: 80,
        key: 'index',
        frozen: true,
      },
      {
        name: '阀门,传感器接入状态',
        width: 160,
        key: 'meter_status_st0_D7',
        formatter: (event) => {
          const parseST0=Number(event.row.meter_status_st0).toString(2).padStart(8, '0')
          const D7=parseST0.substring(0,1)
          if(D7==='0'){
            return <span style={{color:'red'}}>未接入</span>
          }else if(D7==='1'){
            return <span style={{color:'green'}}>已接入</span>
          }
          return parseST0+':'+D7
        },
      },
      {
        name: '阀门状态',
        width: 120,
        key: 'meter_status_st0_D0D1',
        formatter: (event) => {
          const parseST0=Number(event.row.meter_status_st0).toString(2).padStart(8, '0')
          const D0D1=parseST0.substring(6,8)
          if(D0D1==='00'){
            return <span style={{color:'green'}}>开</span>
          }else if(D0D1==='01'){
            return <span style={{color:'red'}}>关</span>
          }else if(D0D1==='10'){
            return '异常(减速执行器异常)'
          }else if(D0D1==='11'){
            return '异常(球阀垢死)'
          }
          return parseST0+':'+D0D1
        },
      },
      {
        name: '电池电压',
        width: 80,
        key: 'meter_status_st0_D2',
        formatter: (event) => {
          const parseST0=Number(event.row.meter_status_st0).toString(2).padStart(8, '0')
          const D2=parseST0.substring(5,6)
          if(D2==='0'){
            return <span style={{color:'green'}}>正常</span>
          }else if(D2==='1'){
            return <span style={{color:'red'}}>欠压</span>
          }
          return parseST0+':'+D2
        },
      },
      {
        name: '赊欠状态',
        width: 80,
        key: 'meter_status_st0_D3',
        formatter: (event) => {
          const parseST0=Number(event.row.meter_status_st0).toString(2).padStart(8, '0')
          const D3=parseST0.substring(4,5)
          if(D3==='0'){
            return <span style={{color:'green'}}>未赊欠</span>
          }else if(D3==='1'){
            return <span style={{color:'red'}}>已赊欠</span>
          }
          return parseST0+':'+D3
        },
      },
      {
        name: '剩余量情况',
        width: 100,
        key: 'meter_status_st0_D4',
        formatter: (event) => {
          const parseST0=Number(event.row.meter_status_st0).toString(2).padStart(8, '0')
          const D4=parseST0.substring(3,4)
          if(D4==='0'){
            return <span style={{color:'green'}}>余量充足</span>
          }else if(D4==='1'){
            return <span style={{color:'red'}}>余量不足报警</span>
          }
          return parseST0+':'+D4
        },
      },
      {
        name: '磁干扰',
        width: 80,
        key: 'meter_status_st0_D5',
        formatter: (event) => {
          const parseST0=Number(event.row.meter_status_st0).toString(2).padStart(8, '0')
          const D5=parseST0.substring(2,3)
          if(D5==='0'){
            return <span style={{color:'green'}}>无干扰</span>
          }else if(D5==='1'){
            return <span style={{color:'red'}}>有干扰</span>
          }
          return parseST0+':'+D5
        },
      },
      {
        name: '阀门泄露',
        width: 80,
        key: 'meter_status_st0_D6',
        formatter: (event) => {
          const parseST0=Number(event.row.meter_status_st0).toString(2).padStart(8, '0')
          const D6=parseST0.substring(1,2)
          if(D6==='0'){
            return <span style={{color:'green'}}>无泄漏</span>
          }else if(D6==='1'){
            return <span style={{color:'green'}}>有泄露</span>
          }
          return parseST0+':'+D6
        },
      },

      {
        name: '阀门维护',
        width: 80,
        key: 'meter_status_st1_D0',
        formatter: (event) => {
          const parseST1=Number(event.row.meter_status_st1).toString(2).padStart(8, '0')
          const D0=parseST1.substring(7,8)
          if(D0==='0'){
            return <span style={{color:'green'}}>未启用</span>
          }else if(D0==='1'){
            return <span style={{color:'red'}}>已启用</span>
          }
          return parseST1+':'+D0
        },
      },
      {
        name: '上报点冻结数据',
        width: 120,
        key: 'meter_status_st1_D1',
        formatter: (event) => {
          const parseST1=Number(event.row.meter_status_st1).toString(2).padStart(8, '0')
          const D1=parseST1.substring(6,7)
          if(D1==='0'){
            return <span style={{color:'red'}}>不上报</span>
          }else if(D1==='1'){
            return <span style={{color:'green'}}>上报</span>
          }
          return parseST1+':'+D1
        },
      },
      {
        name: 'ST0',
        width: 120,
        key: 'meter_status_st0',
        formatter: (event) => {
          const parseST0=Number(event.row.meter_status_st0).toString(2).padStart(8, '0')
          return parseST0
        },
      },
      {
        name: 'ST1',
        width: 120,
        key: 'meter_status_st1',
        formatter: (event) => {
          const parseST1=Number(event.row.meter_status_st1).toString(2).padStart(8, '0')
          return parseST1
        },
      },
      {
        name: '剩余量',
        width: 120,
        key: 'remaining_recharge_flow',
      },
      {
        name: '水表累计充值量',
        width: 120,
        key: 'cumulative_recharge_flow',
      },
      {
        name: '当前正累计流量',
        width: 120,
        key: 'positive_cumulative_flow',
      },
      {
        name: '当天0点正累计流量',
        width: 150,
        key: 'zero_point_positive_cumulative_flow',
      },
      {
        name: '前1天0点正累计流量',
        width: 150,
        key: 'zero_point_positive_cumulative_flow2',
      },
      {
        name: '前2天0点正累计流量',
        width: 150,
        key: 'zero_point_positive_cumulative_flow3',
      },
      {
        name: '初始水量',
        width: 100,
        key: 'initial_value',
      },
      {
        name: '水表充值次数',
        width: 100,
        key: 'recharge_times',
      },

    ].map(c => ({...defaultColumnProperties, ...c}));

    const reverceData = detail.latest_data;
    return (
      <div>
        <Descriptions title={<div>
          <span>采集器基本信息</span>
          <Button onClick={() => {

            document.querySelector('.ant-drawer-content .ant-drawer-wrapper-body').scrollTop = 1000;
          }} size={'small'} style={{float: 'right'}} icon={'arrow-down'} type={'primary'}>滚动到底部</Button>
        </div>} bordered>
          <Descriptions.Item label="采集器号" span={2}> <Tooltip
            title={detail.number}>{detail.number}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="IMEI" span={2}><Tooltip
            title={detail.imei}>{detail.imei}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="采集时间" span={2}><Tooltip
            title={detail.concentrator_info.upload_time}>{detail.concentrator_info.upload_time}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="小区基站号" span={2}><Tooltip
            title={detail.concentrator_info.base_station_number}>{detail.concentrator_info.base_station_number}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="CSQ" span={2}><Tooltip
            title={detail.concentrator_info.csq}>{detail.concentrator_info.csq}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="RSRP" span={2}><Tooltip
            title={detail.concentrator_info.rsrp}>{detail.concentrator_info.rsrp}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="RSRQ" span={2}><Tooltip
            title={detail.concentrator_info.rsrq}>{detail.concentrator_info.rsrq}</Tooltip></Descriptions.Item>

          <Descriptions.Item label="SNR" span={2}><Tooltip
            title={detail.concentrator_info.snr}>{detail.concentrator_info.snr}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="流量精度" span={2}><Tooltip
            title={detail.concentrator_info.precision}>{detail.concentrator_info.precision}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="设备版本号" span={2}>{detail.concentrator_info.main_software_version}.{detail.concentrator_info.sub_software_version}</Descriptions.Item>
          <Descriptions.Item label="电池电压" span={2}><Tooltip
            title={detail.concentrator_info.battery_pressure}>{detail.concentrator_info.battery_pressure}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="昨日平均电流" span={2}><Tooltip
            title={detail.concentrator_info.yesterday_average_current}>{detail.concentrator_info.yesterday_average_current}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="昨日最小电流" span={2}><Tooltip
            title={detail.concentrator_info.yesterday_minimum_current}>{detail.concentrator_info.yesterday_minimum_current}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="采集压力" span={2}><Tooltip
            title={detail.concentrator_info.collection_pressure}>{detail.concentrator_info.collection_pressure}</Tooltip></Descriptions.Item>

          <Descriptions.Item label="地址" span={2}>{detail.address}</Descriptions.Item>
          <Descriptions.Item label="备注" span={4}>{detail.remark}</Descriptions.Item>
        </Descriptions>



        <h3 className={'ant-descriptions-title'} style={{marginTop: '18px'}}>采集器内水表
        </h3>

        <div style={{height: '320px', marginTop: '10px'}}>

            <ReactDataGrid
                columns={columns}
                rowGetter={i => reverceData[i]}
                rowsCount={reverceData.length}
                minHeight={330}
              />

        </div>

        <Drawer
          title={`${this.state.editRecord.number} 详情`}
          placement="right"
          destroyOnClose
          onClose={() => {
            this.setState({
              infoModal: false,
              editRecord: {},
            });
          }}

          width={700}
          visible={this.state.infoModal}
        >
          <Detail id={this.state.editRecord.id}></Detail>
        </Drawer>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);
